<!-- 数据总览 1-->
<template>
	<fill-height-scroll-view>
		<template slot="element">
			<view class="p3 bf">
				<view class="wei c0 f36">今日实时数据</view>
				<view class="cardList">
					<view :class="[item.active?'card-active':'card-inactive']" v-for="(item,index) in totalList"
						:key="item.name" @click="choose(index)">
						<text class="f26">{{item.name}}</text>
						<text class="f34 mt20">{{item.num}}</text>
					</view>
				</view>
				<view class="w100 f-bt mt40">
					<view class="title f32">营业概况</view>
					<view class="c6" @click="go({t:1,url:'/yb_shd/dp/statement/bill-detail?time=' + new Date().format('yyyy-MM-dd')})">查看详情></view>
				</view>
				<view class="m02">
					<view class="w100 f24 f-bt mt10 mb30 ca2">
						<view>今日营业概况</view>
						<view>{{time}}更新</view>
					</view>
					<view class="qiun-charts cell">
						<qiun-data-charts canvasId="overviewmix" :canvas2d="true" :inScrollView="true"
							type="mix" :chartData="LineData" @getIndex="getIndex"
							:tooltipShow="false" background="#FFFFFF" />
						<!-- tooltip start -->
						<view class="tooltip" v-if="showTooltip">
							<view>{{tooltopData.title}}</view>
							<view v-for="item in tooltopData.data" :key="item.name" class="f-s-c">
								<view :style="{background:item.color}"
									style="width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 10rpx;"></view>
								<text>{{item.name}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
						<!-- tooltip end-->
					</view>
				</view>
			</view>
			<view class="bf p3 mt20">
				<view class="w100 f-bt">
					<view class="title f32">订单概况</view>
					<view class="c6" @click="$emit('changeCurrent',1)">查看详情></view>
				</view>
				<view class="m02">
					<view class="ca2 f24 mt10">仅统计今日有效的订单</view>
					<view class="cardList">
						<view class="analysis" v-for="(item,index) in orderList" :key="item.name">
							<text class="f28">{{item.name}}</text>
							<text class="f36 wei m10">{{item.num}}</text>
							<text class="ca2 f24">营业额：<text class="cfa">{{item.rate}}</text></text>
						</view>
						<!-- 占位元素 start -->
						<view style="width: 180rpx;height: 160rpx;"></view>
						<!-- 占位元素 end -->
					</view>
				</view>
				<view class="w100 f-bt mt40">
					<view class="title f32">流量看板</view>
					<!-- <view class="c6">查看详情></view> -->
				</view>
				<view class="m02">
					<view class="ca2 f24 mt10">关注新老顾客占比与复购率，提升下单频率</view>
					<view class="cardList">
						<view class="flow-card"
							v-for="(item,index) in [{name:'今日浏览量(pv)',num:result.visitCount},{name:'今日访客数(uv)',num:result.totalVisitCount}]"
							:key="item.name" @click="choose(index)">
							<text class="f26">{{item.name}}</text>
							<text class="f34 mt20">{{item.num}}</text>
						</view>
					</view>
					<view class="qiun-charts mt30 cell">
						<qiun-data-charts canvasId="overviewmix2" :canvas2d="true" :inScrollView="true"
							type="mix" :chartData="ringData" @getIndex="getIndex"
							:tooltipShow="false" background="#FFFFFF" />
						<!-- tooltip start -->
						<view class="tooltip" v-if="showTooltip2">
							<view>{{tooltopData.title}}</view>
							<view v-for="item in tooltopData.data" :key="item.name" class="f-s-c">
								<view :style="{background:item.color}"
									style="width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 10rpx;"></view>
								<text>{{item.name}}</text>
								<text>{{item.value}}</text>
							</view>
						</view>
						<!-- tooltip end-->
					</view>
				</view>
			</view>
		</template>
	</fill-height-scroll-view>
</template>

<script>
	import qiunDataCharts from '@/yb_shd/dp/components/qiun-data-charts/qiun-data-charts.vue'
	import FillHeightScrollView from '@/yb_shd/dp/components/fill-height-scroll-view.vue'
	export default {
		components: {
			qiunDataCharts,
			FillHeightScrollView
		},
		data() {
			return {
				showTooltip: false,
				showTooltip2: false,
				tooltopData: {},
				time: '',
				result: {},
				LineData: null, //图表对象数据
				ringData: null,
				orderList: [
					{name: '外卖订单',num: '0',rate: '0'}, {name: '堂食订单',num: '0',rate: '0'},
					{name: '快餐订单',num: '0',rate: '0'},{name: '当面付订单',num: '0',rate: '0'}, 
					{name: '其他订单',num: '0',rate: '0'}
				],
				totalList: [
					{name: '营业总额(元)',num: '0',active: true}, {name: '预计收入(元)',num: '0',active: false},
					{name: '有效订单(单)',num: '0',active: false},{name: '支付人数(元)',num: '0',active: false},
					{name: '取消/售后(单)',num: '0',active: false},{name: '下单转化率',num: '0%',active: false}
				],
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			getIndex(e) {
				var index = e.currentIndex.index
				if (index === -1) {
					return
				}
				var tooltopData = {}
				var t = 2000
				if (e.id === 'overviewmix') {
					if (this.showTooltip) {
						return
					}
					tooltopData = {
						title: `时间：${index}:00~${index+1}:00`,
						data: [{
								color: e.opts.color[0],
								name: '今日营业额：',
								value: this.result.todayChar[index].money
							},
							{
								color: e.opts.color[1],
								name: '昨日营业额：',
								value: this.result.yesterChar[index].money
							}
						]

					}
					this.showTooltip = true
					setTimeout(() => {
						this.showTooltip = false
					}, t)
				} else if (e.id === 'overviewmix2') {
					if (this.showTooltip2) {
						return
					}
					tooltopData = {
						title: `时间：${index}:00~${index+1}:00`,
						data: [{
								color: e.opts.color[0],
								name: '今日浏览量：',
								value: this.result.visitArr[index].money
							},
							{
								color: e.opts.color[1],
								name: '今日访客数：',
								value: this.result.visitCountArr[index].money
							}
						]

					}
					this.showTooltip2 = true
					setTimeout(() => {
						this.showTooltip2 = false
					}, t)
				}
				this.tooltopData = tooltopData
			},
			async fetchData() {
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.realProfit
					})
					this.result = data
					this.totalList[0].num = data.todayTotal
					this.totalList[1].num = data.yujiSum
					this.totalList[2].num = data.payCount
					this.totalList[3].num = data.userCount
					this.totalList[4].num = data.safeCount
					this.totalList[5].num = data.conversion

					this.orderList[0].num = data.outCount
					this.orderList[0].rate = data.outMoney

					this.orderList[1].num = data.inCount
					this.orderList[1].rate = data.inMoney

					this.orderList[2].num = data.fastCount
					this.orderList[2].rate = data.fastMoney

					this.orderList[3].num = data.payFaceCount
					this.orderList[3].rate = data.payFaceMoney

					this.orderList[4].num = data.otherCount
					this.orderList[4].rate = data.otherMoney
					this.getChartData(data)
					// 更新时间
					this.time = new Date().format('yyyy-MM-dd hh:mm')
				} catch (e) {
					this.util.message(e.msg, 3)
				}
			},
			choose(index) {
				this.totalList.forEach((item, i) => {
					if (index === i) {
						item.active = true
					} else {
						item.active = false
					}
				})
			},
			getChartData(data) {
				var LineData = {
					categories: [],
					series: []
				};
				for (let i = 1; i <= 24; i++) {
					LineData.categories.push(i)
				}
				var LineDataToday = data.todayChar.map(element => {
					return +element.money || 0
				})
				var LineDataYesterday = data.yesterChar.map(element => {
					return +element.money || 0
				})
				LineData.series = [{
						name: "今日",
						"type": "area",
						"style": "curve",
						data: LineDataToday,
						color: '#3273EF',
						legendShape: 'square'
					},
					{
						name: "",
						"type": "line",
						"style": "curve",
						data: LineDataToday,
						color: '#3273EF',
						"disableLegend": true,
						legendShape: 'none'
					}, {
						name: "昨日",
						"type": "line",
						"style": "curve",
						data: LineDataYesterday,
						lineType: 'dash',
						color: '#BCD4F8',
						legendShape: 'square'
					}
				]
				this.LineData = LineData
				var ringData = {
					categories: [],
					series: []
				};
				for (let i = 1; i <= 24; i++) {
					ringData.categories.push(i)
				}
				var ringDataToday = data.visitArr.map(element => {
					return +element.money || 0
				})
				var ringDataYesterday = data.visitCountArr.map(element => {
					return +element.money || 0
				})
				ringData.series = [{
						name: "今日浏览量",
						"type": "line",
						"style": "curve",
						data: ringDataToday,
						lineType: 'dash',
						color: '#BCD4F8',
						legendShape: 'square'
					},
					{
						name: "",
						"type": "line",
						"style": "curve",
						data: ringDataYesterday,
						color: '#3273EF',
						"disableLegend": true,
						legendShape: 'none'
					},
					{
						name: "今日访客数",
						"type": "area",
						"style": "curve",
						data: ringDataYesterday,
						color: '#3273EF',
						legendShape: 'square'
					}
				]
				this.ringData = ringData
			}
		}

	}
</script>

<style scoped lang="scss">
	.title {
		position: relative;
		margin-left: 20rpx;
		font-weight: bold;
		color: #000;
	}

	.title::after {
		content: "";
		position: absolute;
		width: 10rpx;
		height: 20rpx;
		left: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		background: #FE9367;
	}

	.cardList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 30rpx;

		.card-inactive {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #ccc;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
		}

		.card-active {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			// background: #FEFAED;
			background: #fe93673d;
			margin-top: 20rpx;
			border: 1px solid #FE9367;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
			font-weight: bold;
		}
	}

	.flow-card {
		display: flex;
		flex-direction: column;
		width: 48%;
		height: 160rpx;
		background: #FEFAED;
		margin-top: 20rpx;
		border: 1px solid #E3BD76;
		border-radius: 10rpx;
		justify-content: center;
		padding: 20rpx;
		font-weight: bold;
	}

	.analysis {
		display: flex;
		flex-direction: column;
		width: 180rpx;
		height: 160rpx;
		margin-top: 20rpx;
		justify-content: center;
	}

	.qiun-charts {
		width: 730rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin-left: -40rpx;
	}

	.charts-ring {
		width: 345rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.tooltip {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, .9);
		color: #FFFFFF;
	}
</style>
